<template>
  <div class="app-container">
    <!-- 题库管理-题库录入 -->
    <div>试题录入</div>
    <el-divider></el-divider>
    <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
      <el-form-item label="学科" prop="subjectID">
      <!-- change	选中值发生变化时触发	目前的选中值 -->
        <el-select v-model="form.subjectID" placeholder="请选择" @change="subChange">
          <el-option
            v-for="item in subOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="目录" prop="catalogID">
        <el-select v-model="form.catalogID" placeholder="请选择">
          <el-option
            v-for="item in cataOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="企业" prop="enterpriseID">
        <el-select v-model="form.enterpriseID" placeholder="请选择">
          <el-option
            v-for="item in enterOptions"
            :key="item.id"
            :label="item.company"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="城市" prop="province">
        <el-select v-model="form.province " placeholder="请选择" @change="provinceChange">
            <el-option
              v-for="item in provinceOptions"
              :key="item.city"
              :label="item.city"
              :value="item.city">
            </el-option>
        </el-select>
        <el-select v-model="form.city" placeholder="请选择">
            <el-option
              v-for="item in cityOptions"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
        </el-select>
      </el-form-item>
    <el-form-item label="方向" prop="direction">
      <el-select v-model="form.direction" placeholder="请选择">
          <el-option
            v-for="item in directionOptions"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="题型" prop="questionType">
      <el-radio v-model="form.questionType" :label="item.value + ''" v-for="item in typeOptions" :key="item.value" @input="changeType(item)">{{item.label}}</el-radio>
    </el-form-item>
    <el-form-item label="难度" prop="difficulty">
      <el-radio v-model="form.difficulty" :label="item.value + ''" v-for="item in difficultyOption" :key="item.value">{{item.label}}</el-radio>
    </el-form-item>
    <el-form-item label="题干">
      <!-- 富文本 -->
      <quill-editor v-model="form.question" :options="editorOption"></quill-editor>
    </el-form-item>
    <el-form-item label="选项" v-if="form.questionType !== '3'">
      <!-- 单选 -->
      <template v-if="form.questionType === '1'">
        <div v-for="(item, index) in form.options" :key="index" style="margin-bottom: 15px">
          <el-radio v-model="item.isRight" :label="true"  @change="changeRadio(item)">{{item.code+ ":"}}</el-radio>
          <el-input v-model="item.title" style="width: 50%; margin-left: -20px"></el-input>
        </div>
      </template>
      <!-- 多选 -->
      <!-- <template v-if="form.questionType === '2'">
        <div v-for="(item, index) in options" :key="index" style="margin-bottom: 20px"> 
          <el-checkbox v-model="item.isRight">{{item.code + ":"}}</el-checkbox>
          <el-input v-model="item.title" style="width: 50% ; margin-right: 30px"></el-input>
        </div>
      </template> -->
      <!-- 多选的逻辑根单选一样只不过 单选多了一步 清除其他选中只选择自己  多项不用处理 那 -->
      <template v-if="form.questionType === '2'">
        <div v-for="(item, index) in form.options" :key="index"  style="margin-bottom: 15px">
          <el-checkbox v-model="item.isRight" @change="handleCheckbox(item)">{{item.code + ":"}}</el-checkbox>
          <!-- <el-radio v-model="item.isRight" :label="item.code">{{item.code}}</el-radio> -->
          <el-input v-model="item.title" style="width: 50%; margin-left: 10px"></el-input>
        </div>
      </template>
      <el-button type="danger" :disabled="form.questionType ==='1'" @click="optionAdd">+ 增加选项与答案</el-button>
    </el-form-item>
    <el-form-item label="解析视频">
      <el-input v-model="form.videoURL"></el-input>
    </el-form-item>
    <el-form-item label="答案解析" prop="answer">
      <!-- 富文本 -->
      <quill-editor v-model="form.answer" :options="editorOption"></quill-editor>
    </el-form-item>
    <el-form-item label="题目备注">
      <el-input
        type="textarea"
        :rows="5"
        placeholder="请输入内容"
        v-model="form.remarks">
      </el-input>
    </el-form-item>
    <el-form-item label="试题标签">
      <el-select v-model="form.tags" placeholder="请选择" @change="subChange">
        <el-option
          v-for="item in tagsOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="confirm">确认提交</el-button>
    </el-form-item>
  </el-form>
  </div>
</template>

<script>
import {difficulty, questionType, direction} from '@/api/constants'
import {datas} from '@/utils/city'
import {simpleSubject} from '@/api/subjects'
import {simpleDirectory} from '@/api/directorys'
import {tagsSimple} from '@/api/tags'
import {companys, addQuestions} from '@/api/questions'
export default {
  name: 'New',
  data() {
    return {
      form: {
        subjectID: '',//学科
        catalogID: '',//目录
        enterpriseID: '',//企业
        direction: '',//方向
        province: '', // 市
        city: '', // 区
        questionType:'1', // 题型
        difficulty: '1', //难度
        question: '',//题干
        options:[//选项 定义选择初始数据  最后将这个通过接口给后端
          {code:'A', title:"", img:"", isRight: false},
          {code:'B', title:"", img:"", isRight: false},
          {code:'C', title:"", img:"", isRight: false},
          {code:'D', title:"", img:"", isRight: false}
        ],
        videoURL: '',//解析视频
        answer: '',//答案解析
        remarks: '',//题目备注
        tags: '',//试题标签
      },
      rules: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'blur' },
        ],
        catalogID: [
          { required: true, message: '请选择目录', trigger: 'blur' },
        ],
        enterpriseID:[
          { required: true, message: '请选择企业', trigger: 'blur' },
        ],
        province: [
          { required: true, message: '请选择地区', trigger: 'blur' },
        ],
        direction: [
          { required: true, message: '请选择方向', trigger: 'blur' },
        ],
        questionType:[
          { required: true, message: '请选择题型', trigger: 'blur' },
        ],
        difficulty: [
          { required: true, message: '请选择难度', trigger: 'blur' },
        ],
        question:[
          { required: true, message: '请输入题干', trigger: 'blur' },
        ],
        answer:[
          { required: true, message: '请输入解析', trigger: 'blur' },
        ],
      },
      subOptions: [],//学科
      cataOptions: [],//目录
      enterOptions: [],//企业
      provinceOptions: [],//省
      cityOptions: [],//市
      directionOptions: [],//方向
      typeOptions: [],//题型
      difficultyOption: [],//难度
      tagsOptions: [],
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            ['blockquote'], // 引用
            ['code-block', 'image', 'link'] //  代码块、图片、视频
          ]
        },
        placeholder: ''
      }
  }
  },
  mounted() {
    this.getOptins()
    this.getSubList()
    this.getCity()
    this.companyList()
    this.getDifficult()
    this.getQuestionType()
  },
  methods: {
    // 获取学科列表
    async getSubList() {
      const res = await simpleSubject()
      // console.log(res);
      this.subOptions = res
    },
    async subChange(num) {
      // console.log(num);
      // 对应二级目录简单列表
      const res = await simpleDirectory(num)
      // console.log(res);
      this.cataOptions = res
      // 对应的标签列表
      const tagRes = await tagsSimple(num)
      // console.log('标签', tagRes)
      this.tagsOptions = tagRes
    },
    // 难度 类型 方向
    getOptins() {
      this.difficultyOptions = difficulty
      this.typeOptions = questionType
      this.directionOptions = direction
    },
    getCity() {
      this.provinceOptions = datas
    },
    // 城市联动
    provinceChange(e) {
      // console.log(e);
      const c = this.provinceOptions.filter(item => {
        if(item.city === e){
          // console.log(item);
          return item
        }
      })
      // console.log(c);
      this.cityOptions = c[0].area
    },
    // 企业
    async companyList() {
      const res = await companys()
      // console.log('企业',res.items);
      this.enterOptions = res.items
    },
     // 题型
    getQuestionType() {
      this.typeOptions = questionType
    },
    getDifficult() {
      this.difficultyOption = difficulty
    },
    // 解决多个不同组的单选框选中问题
    // 单选框点击触发的事件
    changeRadio(item){
      // forEach 处理
      // const endArr = []
      // // 循环选项组 让每一项都和点击项的 code 对比
      // this.form.options.forEach(i => {
      //   // 判断点击项的 code 和 循环选项组中的当前项的 code 是不是相同
      //   if(i.code === item.code) { // 相同就让他的 isRight 为 true
      //     endArr.push({...i, isRight: true}) 
      //   } else { // 不相同就让他的 isRight 为 false
      //     endArr.push({...i, isRight: false})
      //   }
      // })
      // this.form.options = endArr

      // map 处理
      this.form.options = this.form.options.map(itemm => itemm.code === item.code ? {...itemm, isRight: true} : {...itemm, isRight: false})
    },
    // 多选的事件
    handleCheckbox(radio) {
      // console.log('多选',radio);
      this.form.options.forEach(item => {
        if(item.code === radio.code) {
          if(item.isRight === false) {
            item.isRight = true
          } else {
            item .isRight === false
          }
        }
      })
    },
    // 重置只会重置选项  不会重置内容还有个数神魔nn  多选 单选 简答切换
    changeType(item) { 
      // console.log( '888',item);
      // 重置1:不保留数据,直接回复为初始选项
      // 你这里是让所有数据回复原样
      // this.form.options = [
      //   {code:'A', title:null, img:null, isRight: false},
      //   {code:'B', title:null, img:null, isRight: false},
      //   {code:'C', title:null, img:null, isRight: false},
      //   {code:'D', title:null, img:null, isRight: false}
      // ]

      // 重置2:保留数据,只把选中都恢复为未选中.需重新选择
      // 你想写成什么效果啊  跟老师的一样吗 如果跟老师的一样  你只需要将 this.form.options 里所有的 isRight 变为 false 剩下的都不变
      // 你直接在这里只让对象中的 isRight 回复成false剩下不懂不久好了
      // 方法是写对着呢 但是少了个东西 看看我接的那句话看最后几个字  创建一个新的数组 对 啊 也就是说一个数组执行完map后会得到一个新的数组 不会改变原来的数组
      // 在
      this.form.options = this.form.options.map((item) => {
        return {...item, isRight: false}
      })  
    },
    // 确认按钮
    confirm() {
      this.$refs.form.validate(async(valid) => {
        if(valid) {
          await addQuestions(this.form)
          // 提示用户
          this.$message.success('添加成功')
          // 清空表单
          this.form = {
            subjectID: '',//学科
            catalogID: '',//目录
            enterpriseID: '',//企业
            direction: '',//方向
            province: '', // 市
            city: '', // 区
            questionType:'1', // 题型
            difficulty: '1', //难度
            question: '',//题干
            options:[//选项 定义选择初始数据  最后将这个通过接口给后端
              {code:'A', title:"", img:"", isRight: false},
              {code:'B', title:"", img:"", isRight: false},
              {code:'C', title:"", img:"", isRight: false},
              {code:'D', title:"", img:"", isRight: false}
            ],
            videoURL: '',//解析视频
            answer: '',//答案解析
            remarks: '',//题目备注
            tags: '',//试题标签
          }
          // 清空校验规则
          this.$refs.form.resetFields()
          // 跳到基础题库
          this.$router.push('/questions/list')
          // 刷新 基础题库的列表
          
        }
      })
    },
    // optionAdd选项增加
    optionAdd() {
      // 获取最后一个选项 的code
      let code = this.form.options[this.form.options.length - 1].code
      // 把code转为ascII码
      let codeAscii = code.charCodeAt(0)
      // console.log(code, codeAscii);
      // 把得到的code值转为ascII码 + 1  在转为字符
      let codeAdd = String.fromCharCode(codeAscii + 1);
      // 把他插入 这个插入是在哪里插入丫 在选项里最后 插入一条
      this.form.options.push({code: codeAdd, title:"", img:"", isRight: false})
    }
  },
}
</script>

<style lang="scss" scoped>
  .app-container {
    background-color: #fff;
    margin: 20px;
  }
</style>
